<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>加入我们</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
  </head>
  <body>
    <!-- 导航 -->
    <div class="container-fluid">
      <nav class="navbar fixed-top navbar-light bg-light">
        <div class="container justify-content-start" style="width: 900px">
          <!-- logo -->
          <a class="navbar-brand" href="#" style="margin-right: 130px">
            <img
              src="/images/首页切图/smingtechlogo.png"
              alt=""
              width="120"
              height="35"
            />
          </a>
          <!-- 文字 -->
          <ul class="nav">
            <li class="nav-item">
              <a
                class="nav-link active"
                aria-current="page"
                href="./index.html"
                style="color: black"
                >首页</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" style="color: black">产品及解决方案</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" href="./about.html" style="color: black">
                关于赛鸣
              </a>
            </li>
            <li class="nav-item position-relative">
              <a class="nav-link" href="./join.html" style="color: rgb(7, 117, 221)">
                加入我们
              </a>
              <!-- 字下方的小蓝条 -->
              <p
                class="position-absolute"
                style="
                  width: 60%;
                  border-bottom: 5px rgb(7, 117, 221) solid;
                  top: 90%;
                  left: 50%;
                  transform: translateX(-50%);
                "
              ></p>
            </li>
          </ul>
        </div>
      </nav>
    </div>
    <!-- 背景图片 -->
    <div class="container-fluid">
      <img
        src="./images/首页切图/home page_bannerbg.jpg"
        class="img-fluid"
        alt="..."
        style="width: 100%"
      />
      <!-- 标题 -->
      <div
        class="container position-absolute"
        style="width: 600px; top: 30%; left: 25%; color: white"
      >
        <h2 class="fs-1 fw-bolder">加入我们</h2>
        <p class="fs-4 fw-bolder mt-3">坚持以人为本的管理理念，注重员工的发展和培养。</p>
      </div>
    </div>

    <!-- 背景图下方的导航 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container" style="width: 900px">
        <div class="collapse navbar-collapse d-flex justify-content-end" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a
                class="nav-link active position-relative"
                aria-current="page"
                href="#p1"
                style="color: rgb(7, 117, 221)"
              >
                招纳贤士
                <!-- 字下方的小蓝条 -->
                <p
                  class="position-absolute"
                  style="
                    width: 60%;
                    border-bottom: 5px rgb(7, 117, 221) solid;
                    top: 90%;
                    left: 50%;
                    transform: translateX(-50%);
                  "
                ></p>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- body -->
    <div class="container-fluid pt-4" style="background-color: #f6f6f6">
      <!-- 锚点 -->
      <a name="p1"></a>
      <!-- 人才发展 -->
      <div
        class="container position-relative"
        style="
          width: 900px;
          height: 350px;
          background-image: url(./images/加入我们切图/人才.jpeg);
          background-position: 100% 100%;
        "
      >
        <!-- 文字部分 -->
        <div
          class="container txt bg-light position-absolute"
          style="
            width: 40%;
            padding: 5% 5%;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
          "
        >
          <h2>人才发展</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam vel assumenda
            minus eos. Saepe error facilis quasi. Lorem ipsum dolor sit amet consectetur
            adipisicing elit.
          </p>
        </div>
      </div>
      <!-- 导航 -->
      <div class="container mt-4" style="width: 900px">
        <ul class="nav nav-pills nav-justified">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">软件开发</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">管理职能</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">见习培训</a>
          </li>
        </ul>
      </div>
      <!-- 招聘 -->
      <div class="container d-flex mt-4 section5" style="width: 900px">
        <!-- 左 -->
        <div class="list-group ps-3 bg-light" style="width: 200px">
          <style>
            .section5 .list-group-item {
              text-align: left;
              height: 60px;
              padding: 20px;
              border: 0px solid;
            }
          </style>
          <h4 class="list-group-item pb-5">招聘职位</h4>
          <a href="#" class="list-group-item list-group-item-action" aria-current="true">
            软件项目经理
          </a>
          <a href="#" class="list-group-item list-group-item-action"> 软件项目需求 </a>
          <a href="#" class="list-group-item list-group-item-action"> 前端开发工程师 </a>
          <a href="#" class="list-group-item list-group-item-action">后端开发工程师</a>
          <a
            href="#"
            class="list-group-item list-group-item-action disabled"
            tabindex="-1"
            aria-disabled="true"
          >
            软件测试工程师
          </a>
          <a
            href="#"
            class="list-group-item list-group-item-action disabled"
            tabindex="-1"
            aria-disabled="true"
          >
            精益工程师
          </a>
        </div>
        <!-- 右 -->
        <div class="container ms-5 pt-4 pb-5 section5_right" style="width: 600px">
          <!-- 职位标题 -->
          <div class="container">
            <h4 class="ms-4">前端开发工程师</h4>
            <ul class="d-flex" style="list-style-type: none">
              <li
                style="
                  border: 1px solid grey;
                  margin-right: 10px;
                  padding: 5px 15px;
                  border-radius: 10px;
                  font-size: 12px;
                "
              >
                软件开发
              </li>
              <li
                style="
                  border: 1px solid grey;
                  margin-right: 10px;
                  padding: 5px 15px;
                  border-radius: 10px;
                  font-size: 12px;
                "
              >
                大学本科
              </li>
            </ul>
          </div>
          <!-- 分割线 -->
          <p style="border: 0.1px solid rgb(212, 212, 212)"></p>
          <!-- 内容 -->
          <div class="container ms-4">
            <!-- 岗位 -->
            <p style="padding-left: 10px; border-left: 5px solid rgb(7, 117, 221)">
              岗位职责：
            </p>
            <style>
              .section5_right ol li {
                line-height: 35px;
              }
            </style>
            <ol style="">
              <li>根据工作安排高效、高质地完成代码编写,确保符合规范的前端代码规范:</li>
              <li>负责公司现有项目和新项目的前端修改调试和开发工作</li>
              <li>与设计团队紧密配合,能够实现实现设计师的设计想法;</li>
              <li>与后端开发团队紧密配合,确保代码有效对接,优化网站前端性能;</li>
              <li>页面通过标准校验,兼容各主流浏览器;</li>
              <li>页面通过标准校验,兼容各主流浏览器;</li>
            </ol>
            <!-- 任职 -->
            <p
              class="mt-4"
              style="padding-left: 10px; border-left: 5px solid rgb(7, 117, 221)"
            >
              任职要求：
            </p>
            <ol style="">
              <li>根据工作安排高效、高质地完成代码编写,确保符合规范的前端代码规范:</li>
              <li>负责公司现有项目和新项目的前端修改调试和开发工作</li>
              <li>与设计团队紧密配合,能够实现实现设计师的设计想法;</li>
              <li>与后端开发团队紧密配合,确保代码有效对接,优化网站前端性能;</li>
              <li>页面通过标准校验,兼容各主流浏览器;</li>
              <li>页面通过标准校验,兼容各主流浏览器;</li>
            </ol>
          </div>
        </div>
      </div>
    </div>

    <!-- footer -->
    <div class="container-fluid pt-4" style="background-color: #ced4da">
      <!-- border: 1px solid red -->
      <div class="container pb-5 d-flex" style="width: 900px">
        <div class="row" style="">
          <div class="col-4">
            <ul class="list-group list-group-flush">
              <li class="list-group-item list-group-item-dark">
                <h3 class="title fs-5" style="color: #404c58">优秀产品</h3>
              </li>
              <li class="list-group-item list-group-item-dark">工厂智能平台</li>
              <li class="list-group-item list-group-item-dark">智能教育培训平台</li>
              <li class="list-group-item list-group-item-dark">智能房产</li>
              <li class="list-group-item list-group-item-dark">商城</li>
              <li class="list-group-item list-group-item-dark">其它</li>
            </ul>
          </div>
          <div class="col-3">
            <ul class="list-group list-group-flush" style="background-color: #d8e4ec">
              <li class="list-group-item list-group-item-dark" style="color: #959fa8">
                <h3 class="title fs-5" style="color: #404c58">解决方案</h3>
              </li>
              <li class="list-group-item list-group-item-dark">工厂智能平台</li>
              <li class="list-group-item list-group-item-dark">智能教育培训平台</li>
              <li class="list-group-item list-group-item-dark">智能房产</li>
              <li class="list-group-item list-group-item-dark">商城</li>
              <li class="list-group-item list-group-item-dark">其它</li>
            </ul>
          </div>
          <div class="col" style="margin-left: 50px">
            <ul class="list-group list-group-flush">
              <li class="list-group-item list-group-item-dark" style="font-size: 12px">
                联系我们
              </li>
              <li class="list-group-item list-group-item-dark" style="font-size: 12px">
                咨询电话：022-83717958 18622474586
              </li>
              <li class="list-group-item list-group-item-dark" style="font-size: 12px">
                商务合作：smingtech@smingtech.com
              </li>
              <li class="list-group-item list-group-item-dark" style="font-size: 12px">
                联系地址：天津市华苑产业园区兰苑路5号
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="container d-flex" style="width: 900px">
        <div class="box d-flex mx-auto">
          <p style="margin-top: 5px; border-top: 1px solid black"></p>
          <span>
            <a
              href="#"
              style="
                text-decoration: none;
                color: #5b5b5b;
                font-size: 13px;
                margin-right: 10px;
              "
            >
              Copyright ©
            </a>
          </span>
          <span>
            <a
              href="#"
              style="
                text-decoration: none;
                color: #5b5b5b;
                font-size: 13px;
                margin-right: 10px;
              "
            >
              赛鸣科技有限公司
            </a>
          </span>
          <span>
            <a
              href="#"
              style="
                text-decoration: none;
                color: #5b5b5b;
                font-size: 13px;
                margin-right: 10px;
              "
            >
              版权所有
            </a>
          </span>
          <span>
            <a href="#" style="text-decoration: none; color: #5b5b5b; font-size: 13px">
              津ICP备16009197号-1
            </a>
          </span>
          <div style="margin-left: 50px; color: #5b5b5b; font-size: 13px">
            <img src="./images/首页切图/guohui_photo.png" alt="" />
            津公网安备案 12010202001266号
          </div>
        </div>
      </div>
    </div>
    <!-- js -->
    <script src="./js/bootstrap.bundle.min.js"></script>
  </body>
</html>
